<template>
  <div
    class="h-full bg-zinc-200 dark:bg-zinc-800 duration-400 overflow-auto xl:pt-1"
  >
    <div
      class="relative max-w-screen-lg mx-auto bg-white dark:bg-zinc-900 duration-500 xl:rounded-sm xl:border-zinc-200 xl:dark:border-zinc-600 xl:border xl:px-4 xl:py-2"
    >
      <!-- 移动端 navbar -->
      <z-navbar
        sticky
        v-if="isMobileTerminal"
        :clickLeft="onNavbarLeftClick"
      ></z-navbar>
      <!-- PC 标题 -->
      <div v-else class="text-lg font-bold text-center mb-4 dark:text-zinc-300">
        个人资料
      </div>
      <!-- 头像部分 -->
      <div class="h-full w-full px-1 pb-4 text-sm mt-2 xl:w-2/3 xl:pb-0">
        <div class="py-1 xl:absolute xl:right-[16%] xl:text-center">
          <span
            class="w-8 inline-block mb-2 font-black text-sm dark:text-zinc-300 xl:block xl:mx-auto"
            >我的头像</span
          >
          <div
            class="relative w-[80px] h-[80px] group xl:cursor-pointer xl:left-[50%] xl:translate-x-[-50%]"
            @click="onAvatarClick"
          >
            <!-- 头像 -->
            <img
              class="w-full h-full rounded-full xl:inline-block"
              :src="userInfo.avatar"
            />
            <!-- 点击更换头像 -->
            <div
              class="absolute top-0 left-0 w-full h-full rounded-full bg-black/40 hidden xl:group-hover:block duration-300"
            >
              <z-svg-icon
                name="change-header-image"
                class="w-2 h-2 m-auto mt-2"
              ></z-svg-icon>
              <div
                class="text-xs text-white dark:text-zinc-300 scale-90 mt-0.5"
              >
                点击更换头像
              </div>
            </div>
          </div>
          <input
            v-show="false"
            type="file"
            ref="inputFileTarget"
            accept=".png,.jpg,.jpeg,.gif"
            @change="onChangeFile"
          />
          <p class="mt-1 text-zinc-500 dark:text-zinc-400 text-xs xl:w-10">
            支持 jpg、jpeg、png、gif 格式大小 1M 以内的图片
          </p>
        </div>
        <!-- 用户名 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
            >用户名</span
          >
          <z-input
            v-model="userInfoData.nickname"
            class="w-full"
            type="text"
            max="20"
          ></z-input>
        </div>
        <!-- 职位 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
            >职位</span
          >
          <z-input
            v-model="userInfoData.title"
            class="w-full"
            type="text"
          ></z-input>
        </div>
        <!-- 公司 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
            >公司</span
          >
          <z-input
            v-model="userInfoData.company"
            class="w-full"
            type="text"
          ></z-input>
        </div>
        <!-- 个人主页 -->
        <div class="py-1 xl:flex xl:items-center xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
            >个人主页</span
          >
          <z-input
            v-model="userInfoData.homePage"
            class="w-full"
            type="text"
          ></z-input>
        </div>
        <!-- 个人介绍 -->
        <div class="py-1 xl:flex xl:my-1">
          <span class="w-8 block mb-1 font-bold dark:text-zinc-300 xl:mb-0"
            >个人介绍</span
          >
          <z-input
            v-model="userInfoData.introduction"
            class="w-full"
            type="textarea"
            max="50"
          ></z-input>
        </div>
        <!-- 保存修改 -->
        <z-button
          class="w-full mt-2 mb-4 dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
          :loading="loading"
          @click="onChangeProfile"
          >保存修改</z-button
        >
        <!-- 移动端退出登录 -->
        <z-button
          v-if="isMobileTerminal"
          class="w-full dark:text-zinc-300 dark:bg-zinc-800 xl:w-[160px] xl:ml-[50%] xl:translate-x-[-50%]"
          @click="onLogoutClick"
        >
          退出登录
        </z-button>
      </div>
    </div>
    <!-- PC裁剪 -->
    <z-dialog
      title="裁剪头像"
      v-model="showCropDialog"
      v-if="!isMobileTerminal"
    >
      <changeDialogVue :blob="currentBlob" @close="showCropDialog = false" />
    </z-dialog>
    <!-- 移动端裁剪 -->
    <z-popup
      :class="{ 'h-screen': showCropDialog }"
      v-model="showCropDialog"
      v-else
    >
      <changeDialogVue :blob="currentBlob" @close="showCropDialog = false" />
    </z-popup>
  </div>
</template>

<script setup>
import { isMobileTerminal } from '@/utils/flexible'
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'
import { ref, watch } from 'vue'
import { putProfile } from '@/api/sys'
import { message } from '@/libs/message'
import changeDialogVue from './components/change-avatar.vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '@/store/modules/app'

const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

// 左侧点击事件
const onNavbarLeftClick = () => {
  appStore.changeRouterType('back')
  router.back()
}

// 裁剪dialog
const showCropDialog = ref(false)
// 选中的图片
const currentBlob = ref('')

/**
 * 点击头像
 */
const inputFileTarget = ref(null)
const onAvatarClick = () => {
  inputFileTarget.value.click()
}

// 选择文件
const onChangeFile = () => {
  const imgFile = inputFileTarget.value.files[0]
  if (imgFile) {
    const blob = URL.createObjectURL(imgFile)
    currentBlob.value = blob
    showCropDialog.value = true
  }
}

watch(showCropDialog, (val) => {
  if (val) {
    inputFileTarget.value.value = null
  }
})

/**
 * 数据本地的双向同步，增加一个单层深拷贝
 */
const userInfoData = ref({ ...userInfo.value })

/**
 * 修改个人信息
 */
const loading = ref(false)
const onChangeProfile = async () => {
  loading.value = true
  const data = await putProfile(userInfoData.value)
  userStore.setUserInfo(data)
  message('success', '用户信息修改成功')
  loading.value = false
}

// 退出登录
const onLogoutClick = () => {
  userStore.logout()
}
</script>

<style lang="scss" scoped></style>
